Hello World Chart with React

ChartIQ provides a simple 'HelloWorld' chart to help you better understand the ChartIQ library. This tutorial will guide you through setting up a basic chart in a new React project.

It is recommended that you read the Quick Start tutorial before proceeding.

Important

• This tutorial requires access to the @chartiq packages from npm.
• You need an npm-enabled key.js file to run the chart.
• To request access to the ChartIQ registry or obtain an npm-enabled key.js file, please contact your account manager.

Setup Instructions

Create React App

Begin by creating a new React project using your preferred method. Ensure you establish a basic project structure before moving forward.

Example:

npx create-react-app <your-project-name>

Navigate to your project folder

cd <your-project-name>

Install the ChartIQ core module

npm install @chartiq/core

Copy the key.js file to the src directory

An npm-enabled key.js file is required to run the ChartIQ library. If you do not have this file, please contact your account manager.

Create a HelloWorld.js file within the src directory

touch src/HelloWorld.js

Import necessary React hooks and ChartIQ resources into HelloWorld.js

More information on the ChartIQ resources can be found in the Quick Start tutorial.

Important: To run the library that was installed using npm, you must have an npm-enabled key.js file.

import { useEffect, useRef, useState } from "react";
import getLicenseKey from "./key";
import { CIQ } from "@chartiq/core";
import { default as sample5min } from "@chartiq/core/examples/data/STX_SAMPLE_5MIN.js";
import "@chartiq/core/css/stx-chart.css";
getLicenseKey(CIQ);

Now, let's build our HelloWorld component

// Define and export the HelloWorld component
export default function HelloWorld() {
  const chartRef = useRef(); // Reference to the div element that will host the chart
  const [stx, setStx] = useState(); // State to hold the chart engine instance
  const loading = useRef(true); // Ref to track if the chart is still loading

  useEffect(() => {
    if (loading.current) {
      // Instantiate the chart engine with the specified container
      const stxx = new CIQ.ChartEngine({
        container: chartRef.current,
      });

      setStx(stxx); // Store the chart engine instance in state
      
      // Load the chart with sample data and specified periodicity
      stxx.loadChart("SPY", {
        masterData: sample5min,
        periodicity: {
          period: 1,
          interval: 5,
          timeUnit: "minute",
        },
      });
      loading.current = false; // Mark loading as complete
    }

    // Cleanup function to destroy the chart engine on component unmount
    return () => {
      if (stx) {
        stx.destroy();
        stx.draw = () => {};
        setStx(null);
      }
    };
  }, []);

  return (
    <div
      ref={chartRef}
      className="chartContainer"
      style={{ width: "800px", height: "460px", position: "relative" }}
    ></div>
  );
};

Inside App.js, import your HelloWorld component from HelloWorld.js

import HelloWorld from './HelloWorld';

Render HelloWorld

function App() {
  return (
    <div>
      <HelloWorld />
    </div>
  );
}

After starting your React app, you should see a chart that looks like this:

Next steps

• Essentials Overview